<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 定义根标签 
     未来react创建的元素会插入到这个根标签中,从而渲染出来 
    -->
    <div id="root"></div>

    <!-- 2. 引入react.js和react-dom.js 
     注意: 
     1. 要先引入react,后引入react-dom. 因为react-dom依赖react
     2. react.js引入之后,得到了一个全局对象叫做React
     3. react-dom.js引入之后,得到了一个全局对象叫做ReactDOM
    -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>

    <!-- 3. 根据react提供的方法创建虚拟dom -->
    <script type="text/babel">
      // 在jsx中动态插入数据,要使用插值表达式 {}
      // 1. 插值表达式可以写在jsx中的哪些位置?
      // 1.1 第一个位置是标签的子节点,写在标签子节点位置的插值表达式是为了渲染插值表达式中的数据
      // 1.2 第二个位置是标签的属性的位置,写在属性位置的插值表达式是为了控制属性的值
      // 2. 插值表达式中可以写什么?
      // 可以写任意的js表达式: 一段代码执行之后有结果就是表达式
      // 变量
      // 常量
      // 字面量
      // 运算
      // 函数
      // 函数调用
      // 上面的这些都是表达式,下面的语句不是表达式
      // const a = 1 声明语句 注意:语句不是表达式
      // if,switch 分支语句
      // for,while.. 循环语句

      // 总结:
      // 1. 可以渲染的: 数字,字符串,数组,虚拟dom
      // 2. 可以渲染但是要看结果: 函数调用, 运算
      // 3. 不能渲染的: 布尔值,undefined,null,普通对象,函数
      // 特别注意: 渲染数组,会把数组中每一个元素,当做一个子节点渲染
      const obj = { name: 'zs', age: 18 }
      const xxx = '123'
      let yyy = 999

      function fn() {
        return 123
      }
      const div = (
        <div>
          <h1>{obj.name}</h1>
          <button disabled={false}>按钮</button>
          <div>=================================================</div>
          <p>{xxx}</p>
          <p>{yyy}</p>
          {/*插值表达式中绝对可以写对象,但是不能渲染普通对象,可以渲染虚拟dom对象*/}
          {/*<p>{obj}</p>*/}
          <p>{<span>哈哈哈</span>}</p>
          {/*插值表达式中可以写布尔值,但是不要渲染布尔值,没有意义*/}
          <p>{false}</p>
          {/*注意: 如果要渲染数组,会把数组中每一个元素当做一个子节点去渲染*/}
          <p>{[1, 2, 3]}</p>
          <p>{1 + 1}</p>
          {/*直接渲染函数会警告,并不会展示任何内容*/}
          {/*<p>{function () {}}</p>*/}
          {/*插值表达式中可以写函数调用,如果渲染,要看返回值是什么*/}
          <p>{fn()}</p>
          {/*插值表达式无法渲染null和undefined,NaN可以渲染,但是会警告*/}
          <p>{NaN}</p>
        </div>
      )

      // 4. 根据虚拟dom创建真实dom,并插入到root中渲染页面
      ReactDOM.createRoot(document.getElementById('root')).render(div)
    </script>
  </body>
</html>
